<template>
	<mu-container>
		<top-nav bgColor="#FFFFFF" title="专业库" btnName="主页" :rightShow="true" returnPath="上一级" @rightDo="backHome" style="z-index: 100;"></top-nav>
		<section style="height: 3rem;"></section>
		<mu-tabs full-width :value.sync="active1" inverse color="secondary" text-color="rgba(0, 0, 0, .54)" center>
			<mu-tab>本科</mu-tab>
			<mu-tab>专科</mu-tab>
		</mu-tabs>
		<div class="demo-text" v-if="active1 === 0">
			<mu-container v-for="all in benke" :key="all.id">
				<mu-expansion-panel :expand="panel === all.id" @change="toggle(all.id)">
					<div slot="header">{{all.title}}</div>
					<mu-ripple class="mu-ripple-demo" v-for="name in all.item1" :key="name" @click="gotoProfessionTypePage(name)">
						{{name}}
					</mu-ripple>
				</mu-expansion-panel>
			</mu-container>
		</div>
		<div class="demo-text" v-if="active1 === 1">
			<mu-container v-for="all in zhuanke" :key="all.id">
				<mu-expansion-panel :expand="panel === all.id" @change="toggle(all.id)">
					<div slot="header">{{all.title}}</div>
					<mu-ripple class="mu-ripple-demo" v-for="name in all.item1" :key="name" @click="gotoProfessionTypePage(name)">
						{{name}}
					</mu-ripple>
				</mu-expansion-panel>
			</mu-container>
		</div>
	</mu-container>
</template>

<script>
	export default {
		data() {
			return {
				active1: 0,
				panel: '',
				benke: [],
				like: [],
			};
		},
		mounted() {
			this.getBenkeProfessionType()
			this.getZhuankeProfessionType()
		},
		methods: {
			gotoProfessionTypePage(professionTypeName) {
				this.$router.push({
					name: 'vip_professionTypePage',
					params: {
						professionTypeName: professionTypeName,
					}
				})
			},
			backHome() {
				this.$router.push('/vip_selectPage')
			},
			//			gotoVipSchool(school) {
			//				this.$router.push({
			//					name: 'vip_schoolPage',
			//					params: {
			//						schoolImg: this.idSchoolImg,
			//						name: school.name,
			//						code: school.code,
			//						nature: school.nature,
			//						city: school.cities,
			//						level: this.idLevel,
			//						wenlike: this.idWenlike,
			//						category: this.idCategory,
			//						learnType: this.idLearnType,
			//					}
			//				})
			//			},
			toggle(panel) {
				this.panel = panel === this.panel ? '' : panel;
			},
			getBenkeProfessionType() {
				let that = this
				that.axios.post('gaokao-api/professionType/getBenkeProfessionType').then(
					function(response) {
						that.benke = response.data.benkeProfessionType
					}).catch(
					function(error) {
						console.log(error)
					})
			},
			getZhuankeProfessionType() {
				let that = this
				that.axios.post('gaokao-api/professionType/getZhuankeProfessionType').then(
					function(response) {
						that.zhuanke = response.data.zhuankeProfessionType
					}).catch(
					function(error) {
						console.log(error)
					})
			},
		},
	}
</script>

<style scoped="scoped">
	.mu-ripple-demo {
		position: relative;
		width: 100%;
		height: 40px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-right: 16px;
		background-color: #fff;
		border-radius: 4px;
		border-bottom: 1px solid rgb(0, 0, 0, 0.1);
		color: #909090;
	}
	
	.demo-text {
		padding: 16px;
		background: #fff;
		p {
			margin: 8px 0;
		}
	}
</style>